<template>
  <div>
    <el-button @click="add">添加角色</el-button>
    <el-table :data="rolesList" border style="width: 100%">
      <el-table-column type="index" width="150"> </el-table-column>
      <el-table-column prop="roleName" label="角色名称"> </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small">删除</el-button>
          <el-button type="success" size="small" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="setRole(scope.row.id)"
            >分配权限</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="editId == -1 ? '添加' : '编辑'" :visible.sync="roleLog">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          prop="roleName"
          label="角色名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          prop="roleDesc"
          label="角色描述"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleLog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加和编辑的对话框 -->

    <el-dialog title="分配权限" :visible.sync="treeLog">
      <el-tree
        show-checkbox
        :data="treeList"
        :props="defaultProps"
        default-expand-all
        node-key="id"
        ref="tree"
      ></el-tree>
      <!-- data要展示的树形控件的数据
      props 如果我们的数据和element-ui要求的数据不一样的时候 这个可以定义展示哪个字段
      show-checkbox 展示复选框
       default-expand-all 默认树形控件全部打开
       ref 就相当于是id 后期获取这个节点
       node-key 可以规定我们获取到哪个字段 这里是id后期就获取到id -->

      <div slot="footer" class="dialog-footer">
        <el-button @click="treeLog = false">取 消</el-button>
        <el-button type="primary" @click="setTree">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 权限列表的树形控件的对话框 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      rolesList: [],
      roleLog: false,
      formLabelWidth: "100px",
      form: {
        roleName: "",
        roleDesc: "",
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
        ],
      },
      editId: -1,
      //保存编辑id
      treeLog: false,
      //权限的弹框
      treeList: [],
      //权限列表
      defaultProps: {
        children: "children",
        label: "authName",
      },
      //树形控件 默认显示哪个字段
      roleId: -1,
    };
  },
  methods: {
    getList() {
      this.$axios.get("roles").then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.rolesList = res.data.data;
        }
      });
    },
    //获取角色列表数据
    add() {
      this.roleLog = true;
    },
    //点击添加按钮
    submit() {
      if (this.editId == -1) {
        this.$axios.post("/roles", this.form).then((res) => {
          console.log(res);
          if (res.data.meta.status == 201) {
            this.$message({
              message: res.data.meta.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: "warning",
            });
          }
        });
      } else {
        this.$axios.put(`roles/${this.editId}`, this.form).then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.editId = -1;
          }
        });
      }
      this.getList();
      this.roleLog = false;
      this.form = {
        roleName: "",
        roleDesc: "",
      };
      //编辑和添加完成后重新请求数据 并且让弹框隐藏
    },
    //点击弹框的确定 添加或者编辑
    edit(row) {
      this.roleLog = true;
      this.editId = row.id;
      this.form.roleName = row.roleName;
      this.form.roleDesc = row.roleDesc;
    },
    //点击编辑 弹框出现 保存编辑id  数据回填

    getTreeList() {
      this.$axios.get("/rights/tree").then((res) => {
        console.log(res);
        this.treeList = res.data.data;
      });
    },
    //获取树形权限数据

    setRole(id) {
      this.roleId = id;
      this.treeLog = true;
      //保存当前角色的id
    },
    //点击分配权限按钮
    setTree() {
      console.log(this.$refs.tree.getCheckedKeys());

      // 这种方法拿到 树形控件的 被选中的node-key的值 在这里我们的node-key定义的就是id 返回的是一个数组格式的数据
      let rids = this.$refs.tree.getCheckedKeys().join(",");
      //把id组成的数组通过join 拼接成一个字符串
      console.log(rids);
      this.$axios
        .post(`roles/${this.roleId}/rights`, { rids: rids })
        .then((res) => {
          console.log(res);
          // 在这里加弹框
        });
    },
    //设置角色权限 携带 角色id 以及要把选中 权限的id传过去
  },
  created() {
    this.getList();
    this.getTreeList();
  },
  //进入页面就会执行
};
</script>
